<template>
  <ele-modal
    :width="750"
    :visible="true"
    title="批量导入图片"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    @ok="save"
  >
    <a-form
      :wrapper-col="{ md: { span: 24 }, sm: { span: 24 }, xs: { span: 24 } }"
    >
      <a-row :gutter="24">
        <a-col :md="24" :sm="24" :xs="24">
          <a-form-item label="货品序号">
            <a-row>
              <a-col :md="11" :sm="11" :xs="11">
                <a-input
                  allow-clear
                  placeholder="请输入"
                  autocomplete="off"
                  v-model:value="start"
                />
              </a-col>
              <a-col :md="2" :sm="2" :xs="2" class="text-center"> ~ </a-col>
              <a-col :md="11" :sm="11" :xs="11">
                <a-input
                  allow-clear
                  placeholder="请输入"
                  autocomplete="off"
                  v-model:value="end"
                />
              </a-col>
            </a-row>
          </a-form-item>
          <a-form-item label="选择图片">
            <a-row>
              <a-col :md="13" :sm="13" :xs="13">
                <a>（按住Ctrl可多选）</a>
              </a-col>
              <a-col :md="10" :sm="10" :xs="10">
                当前已选择图片数量：<a>{{ fileList.length || 0 }}</a>
              </a-col>
            </a-row>
          </a-form-item>
          <a-form-item>
            <a-row>
              <a-col :md="20" :sm="10" :xs="20" :offset="2">
                <a-upload
                  name="attachment"
                  multiple
                  :max-count="maxCount"
                  v-model:file-list="fileList"
                  :action="uploadUrl"
                  list-type="picture"
                  @change="uploadHandler"
                  :show-upload-list="true"
                >
                  <a-button type="primary">上传图片</a-button>
                </a-upload>
              </a-col>
            </a-row>
          </a-form-item>
          <a-form-item>
            <div>
              <div class="fs-14 color-999"
                >1、图片按图片名称顺序对应货品序号依次导入。</div
              >
              <div class="fs-14 color-999"
                >2、建议图片大小：宽1080像素，高1080像素。</div
              >
              <div class="fs-14 color-999">3、单张图片限制2M以内。</div>
              <div class="fs-14 color-999"
                >4、限图片扩展名为jpg、png、gif。</div
              >
              <div class="fs-14 color-999">5、每次导入限制1000张以内。</div>
            </div>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </ele-modal>
</template>

<script setup>
  import { ref, reactive, unref, onMounted, watch } from 'vue';
  import { message, Modal } from 'ant-design-vue';
  import {
    DownOutlined,
    UpOutlined,
    PlusOutlined,
    LoadingOutlined
  } from '@ant-design/icons-vue';
  import { uploadUrl } from '@/config/setting';

  const props = defineProps({
    // 弹窗是否打开
    visible: Boolean,
    code: String,
    start: Number,
    end: Number,
    maxCount: Number
  });
  const emit = defineEmits(['inImg', 'update:visible']);
  const loading = ref(false);
  const start = ref(0);
  const end = ref(0);
  const maxCount = ref(1);

  onMounted(() => {
    maxCount.value = props.maxCount;
    start.value = props.start;
    end.value = props.end;
    console.log('props==', props);
  });

  watch(
    () => [start.value, end.value],
    (newValue) => {
      //console.log(newValue[0], newValue[1], end.value, props.start, props.end);
      if (Number(newValue[0]) > Number(props.end)) {
        start.value = props.start;
      }
      if (Number(newValue[1]) > Number(props.end)) {
        end.value = props.end;
      }

      maxCount.value = Number(end.value) - Number(start.value) + 1;
    }
  );

  const fileList = ref([]);

  const save = () => {
    console.log('fileList.value===', fileList.value);

    let form = {
      code: props.code,
      start: start.value,
      end: end.value,
      images: ''
    };
    let img = [];
    fileList.value.forEach((item) => {
      if (
        item &&
        item.response &&
        item.response.data &&
        item.response.data.id
      ) {
        img.push(item.response.data.id);
      }
    });
    form.images = img.join(',');
    console.log('form==', form);
    emit('inImg', form);
  };

  /* 完全自己控制选择文件后的处理 */
  const uploadHandler = (info) => {
    /* console.log('fileList.value==-------=', info);
    fileList.value = [info.file]; */
    if (info && info.file && info.file.response) {
      const data = info.file.response.data;
    }
  };
  /* 更新visible */
  const updateVisible = (value) => {
    emit('update:visible', value);
  };
</script>

<style></style>
